import React from 'react'
import { Tabs, Icon, Layout } from 'antd'
import GanttPicture from './GanttPicture'
import MonthCommand from './MonthCommand'
import MonthEstimate from './MonthEstimate'
const { TabPane } = Tabs;

/**
 * 主体内容
 * @param {*} buttons 右侧按钮组，数组类型，多个按钮逗号隔开，须有唯一key值
 * @param {*} icon 左侧名称的图标，支持Antd的Icon库
 * @param {*} name 左侧名称
 */
const BasicLayout = (props) => {
  return <Tabs tabBarExtraContent={(
    <div className='mydiv'>
      {props.buttons}
    </div>
  )} defaultActiveKey={props.key ? props.key : '1'} type="card" {...props} className="layout-model" onChange={(a) => { props.tabsKey(a) }}>
    <TabPane tab={<div>{props.icon && <Icon type={props.icon} />}<span>{props.name}</span></div>} key="1">
      {
        props.children
      }
    </TabPane>
    <TabPane tab={<div>{props.icon1 && <Icon type={props.icon1} />}<span>{props.name1}</span></div>} key="2">
      {
        <GanttPicture />
      }
    </TabPane>
    <TabPane tab={<div>{props.icon2 && <Icon type={props.icon2} />}<span>{props.name2}</span></div>} key="3">
      {
        <MonthCommand versions={props.versions} search1={props.search1} paging1={props.paging1} rowSelection={props.rowSelection} />
      }
    </TabPane>
    <TabPane tab={<div>{props.icon3 && <Icon type={props.icon3} />}<span>{props.name3}</span></div>} key="4">
      {
        <MonthEstimate />

      }
    </TabPane>
  </Tabs>
};
/**
 * 查询条件的框架
 */
const BasicLayoutSearch = (props) => {
  return <Layout className="layout-model">{props.children}</Layout>
};

export {
  BasicLayout,
  BasicLayoutSearch,
}
